<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完成计算器计算功能</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .top {
    display: flex;
    flex-wrap: nowrap;
  }
  .bottom {
    display: flex;
    flex-wrap: nowrap;
  }
  .text {
    font-size: 15px;
    color: black;
  }
  input {
      border: none;
      outline: none;
      border-bottom: 1px solid #000000;
  }
.btnS{
  display: flex;
  width: 160px;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;

}
.btn {
  display: grid;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: grey;
  margin-top: 5px;
  font-size: 16px;
  font-weight: bold;
 line-height: 40px;
}
</style>
<body>
<div class="top">
<div class="text">算式:</div>
    <input id="exp" name="exp" value="" aria-label="">
</div>
<div class="bottom">
<div class="text">结果:</div>
    <input id="result" name="result" value="" aria-label="">
</div>
<div class="btnS">
<div class="btn" style="flex: 0 0 auto">C</div>
<div class="btn">CE</div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">+</div>
<div class="btn">4</div>
<div class="btn">5</div>
<div class="btn">6</div>
<div class="btn">-</div>
<div class="btn">7</div>
<div class="btn">8</div>
<div class="btn">9</div>
<div class="btn">*</div>
<div class="btn">/</div>
<div class="btn">0</div>
<div class="btn">.</div>
<div class="btn">=</div>
</div>
<script>
    var btns='';
    var exp_input=document.getElementById("exp")
    var exp ="";
    var result_input=document.getElementById("result");

window.onload=function (){
    btns=document.getElementsByClassName('btn');
    for (let btn of btns) {
        btn.onclick=function (){
            console.log(this.innerHTML)

            if(this.innerHTML==="C"){
                exp=""
                exp_input.value=exp
                result_input.value=""
            }else if(this.innerHTML==="="){
                result_input.value=eval(exp)
            }else if(this.innerHTML==="CE"){
                exp=""
                exp_input.value=exp
                result_input.value=""
            }
            else{
                exp+=this.innerHTML
                exp_input.value=exp
            }
        }
    }
    console.log(btns)
}
</script>
</body>
</html>
